<template>
  <view v-if="iv" class="page-container">
    <!-- 头像 -->
    <view class="row first-row">
      <span>头像</span>
      <img 
        src="https://cdn.builder.io/api/v1/image/assets/TEMP/7c39c3bb9015cbb7888b2cf634549fa4731446fbbcec83a3cb8d8f6bd5415ce4?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" 
        class="avatar-image" 
        @click.stop="showLargeImage"
      />
    </view>

    <!-- 用户名 -->
    <view class="row">
      <span>昵称：</span>
      <input 
        v-model="usernameInput" 
        class="input-field" 
        placeholder="请输入昵称"
      />
    </view>

    <!-- 性别 -->
    <view class="row">
      <span>性别：</span>
      <picker mode="selector" :range="genderOptions" :value="genderIndex" @change="onGenderChange">
        <view>{{ gender }}</view>
      </picker>
    </view>

    <!-- 生日 -->
    <view class="row">
      <span>生日：</span>
      <picker mode="date" :value="birthday" @change="onBirthdayChange">
        <view>{{ birthday || '请选择生日' }}</view>
      </picker>
    </view>

    <!-- ID -->
    <view class="row">
      <span>UID：{{ ID }}</span>
    </view>

    <!-- 更新按钮 -->
    <view class="back-button-container" @click="updateUserInfo">
      <button class="back-button">更新</button>
    </view>
  </view>
</template>

<script>
import { UserAPI, getUserInfo,OrderAPI } from '../../services/api'; // 引入 UserAPI
export default {
  data() {
    return {
      username: '',  // 初始化为空
      gender: '暂未设置',  // 默认性别
      genderIndex: 0,  // 性别选择器的默认选项索引
      genderOptions: ['男', '女', '其他'],  // 性别选项（中文）
      ID: "",
      birthday: '',  // 生日
      showModalFlag: false,
      showModal: false,  // 控制是否显示弹窗
      usernameInput: '',  // 临时存储的用户名值
	  iv: false,
    };
  },
  async mounted() {
	this.iv=await OrderAPI.fetchOrderData();
    await this.fetchUserInfo();  // 在组件加载时获取用户信息
  },
  methods: {
    // 性别转换函数：将中文性别转换为英文，或者将英文转换为中文
    convertGender(gender) {
      switch (gender) {
        case '男':
          return 'Male';
        case '女':
          return 'Female';
        case '其他':
          return 'Other';
        case 'Male':
          return '男';
        case 'Female':
          return '女';
        case 'Other':
          return '其他';
        default:
          return '暂未设置';
      }
    },

    async fetchUserInfo() {
      try {
        const userinfo = await getUserInfo(); // 根据 ID 获取用户信息
        this.username = userinfo['username'] || '游客'; // 默认用户名为游客
        this.ID = userinfo['userID'] || '';
        
        // 获取到的性别从英文转换为中文
        this.gender = this.convertGender(userinfo['gender']) || '暂未设置';
        console.log(userinfo['gender']);
        this.birthday = userinfo['birthday'] || '';
        this.usernameInput = this.username; // 使编辑框显示默认用户名
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },

    // 更新用户信息
    async updateUserInfo() {
      if (this.usernameInput.trim() === '') {
        uni.showToast({
          title: '用户名不能为空',
          icon: 'none',
        });
        return;
      }
      
      try {
        // 更新用户信息的请求
        const userData = {
          username: this.usernameInput,
          gender: this.convertGender(this.gender) || 'Other',  // 将中文性别转换为英文
          birthday: this.birthday,
        };
        
        // 调用 API 更新用户数据
        const response = await UserAPI.updateUser(this.ID, userData);

        if (response.message == "User updated successfully") {
          // 如果更新成功，更新本地的用户数据
          this.username = this.usernameInput; // 更新本地用户名
          uni.showToast({
            title: '更新成功',
            icon: 'success',
          });
          console.log('更新成功');
        } else {
          console.error('更新失败');
          uni.showToast({
            title: '更新失败',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('更新用户信息失败:', error);
        uni.showToast({
          title: '更新失败',
          icon: 'none',
        });
      }
    },

    // 性别选择器变更
    onGenderChange(e) {
      this.genderIndex = e.detail.value;
      this.gender = this.genderOptions[this.genderIndex];  // 显示中文选项
    },

    // 生日选择变更
    onBirthdayChange(e) {
      this.birthday = e.detail.value;
    },

    // 点击头像图片时显示大图
    showLargeImage() {
      this.showModal = true;  // 显示大图弹窗
    },
    closeModal() {
      this.showModal = false;  // 隐藏弹窗
    },
  },
};
</script>



<style scoped>
/* 页面背景色 */
.page-container {
  width: 100%;
  height: 100%; /* 确保页面高度占满屏幕 */
  background: linear-gradient(to top, #d0d0d0 0%, #EEE 15%); /* 渐变效果到页面中间开始较白 */
  margin: 0; /* 去除默认的外边距 */
  padding: 0; /* 去除默认的内边距 */
  display: flex;
  flex-direction: column; /* 确保页面布局正常 */
  min-height: 100vh; /* 确保页面至少占满视口高度 */
}



/* 所有行的公共样式 */
.row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 使每行的内容左右分布 */
  width: 100%; /* 每行的宽度占满整个页面 */
  padding: 10px;
  background-color: #FFF; /* 每行的背景色为白色 */
  border-bottom: 1px solid #BBB; /* 行间的分隔线 */
}

/* 第一行样式，确保高度为 120px */
.first-row {
  height: 100px; /* 第二行高度设为 120px */
  padding-left: 20px; /* 让文字稍微往右偏移 */
  justify-content: flex-start; /* 文字靠左 */
  align-items: center; /* 保证文字垂直居中 */
  position: relative; /* 为了定位图片 */
}

/* 图片样式 */
.avatar-image {
  width: 80px; /* 设置图片的宽度 */
  height: 80px; /* 设置图片的高度 */
  position: absolute; /* 使用绝对定位 */
  right: 10px; /* 靠右边 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确居中 */
  cursor: pointer; /* 只有图片部分显示手形光标 */
}

/* 其他行的高度 */
.row:not(.first-row){
  height: 60px; /* 其他行的中等高度 */
  padding-left: 20px; /* 使其他行的文字稍微往右偏移 */
}

/* 行内文本样式 */
.row span {
  font-size: 16px; /* 字体大小 */
  font-weight: normal; /* 字体不加粗 */
}

/* 弹窗样式 */
.modal {
  width: 100%;            /* 设置宽度为 80% */
  height: 100%;           /* 高度设为 80%，保持正方形 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-image {
  max-width: 250px;    /* 最大宽度限制为 90% */
  max-height: 250px;   /* 最大高度限制为 90% */
  object-fit: contain; /* 保持图片的原始比例 */
}

/* 底部返回按钮容器 */
.back-button-container {
  display: flex;
  justify-content: center;
  margin-top: auto; /* 将返回按钮固定在底部 */
  padding: 20px;
  width: 100%;      /* 容器宽度100% */
  position: relative; /* 保证按钮位置正确 */
}

/* 返回按钮样式 */
.back-button {
  background-color: #EEE; /* 灰色背景 */
  color: black;            /* 黑色文字 */
  border: 1px solid #777;  /* 灰色边框 #777 */
  padding: 12px;           /* 按钮内边距 */
  font-size: 16px;         /* 字体大小 */
  border-radius: 20px;     /* 圆角 */
  cursor: pointer;         /* 鼠标悬停时显示手形光标 */
  width: 80%;              /* 宽度为页面宽度的90% */
  text-align: center;      /* 文字居中 */
  box-sizing: border-box;  /* 确保边框和内边距包括在宽度和高度内 */
  margin-left: 10%;         /* 左边距为页面宽度的10% */
  margin-right: 10%;        /* 右边距为页面宽度的10% */
}

/* 按钮悬停时的样式 */
.back-button:hover {
  background-color: #b0b0b0; /* 悬停时背景色变得更深一些 */
}

.edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

.input-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 11px;
}

.input-container span {
  margin-right: 10px;
  font-size: 16px;
}

.input-field {
  flex-grow: 1;
  padding: 13px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.button-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.update-button {
  padding: 4px 8px;
  background-color: #555;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.update-button:hover {
  background-color: #444;
}


/* 页面背景色 */
.page-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #d0d0d0 0%, #EEE 15%);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 所有行的公共样式 */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  background-color: #FFF;
  border-bottom: 1px solid #BBB;
}

/* 用户名编辑输入框 */
.input-field {
  width: 50px; /* 调整宽度 */
  height: 40px; /* 增大高度 */
  margin-left: auto; /* 固定在最右边 */
  padding: 13px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block; /* 保证输入框以块级元素形式显示 */
}

/* 返回按钮样式 */
.back-button {
  background-color: #EEE;
  color: black;
  border: 1px solid #777;
  padding: 12px;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
  width: 80%;
  text-align: center;
  box-sizing: border-box;
  margin-left: 10%;
  margin-right: 10%;
}
</style>
